Build a DOM (Family) Tree!

Question:

Start Quiz:

<!DOCTYPE html>
<!--

This is the HTML document that you'll use jQuery to modify. To take the quiz, click over to app.js!

-->
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <meta charset="UTF-8">
</head>
<body>
	<div>
		<div>
			<div id='family1'>
				<h1>Family1</h1>
				<div id='alex'>
					<h2>Alex</h2>
					<div id='jane'>
						<h3>Jane</h3>
					</div>
				</div>
				<div id='taylor'>
					<h2>Taylor</h2>
					<div id='bob'>
						<h3>Bob</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

/*
For this quiz, you'll need to add to the DOM tree that already exists.

'#family2' should be a sibling of and come after '#family1'. '#bruce' should be the only immediate child
of '#family2'. '#bruce' should have two <div>s as children, '#madison' and '#hunter'.
*/

// Your code goes here!

Solution:

INSTRUCTOR NOTE:

Documentation on .append()

Documentation on .prepend()

Documentation on .insertBefore()

Documentation on .insertAfter()

I know, there are typos in this solution. The ids shouldn't have # in them and I close <h3>s with <h2>s, for some weird reason. My bad.

Toggling Between Files

On the Classroom code editor menu, click the down arrow next to index.html and select app.js to open the script.

Next Concept